<!--
 * @Description: 
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-03-05
 * @LastEditors: 何伟伦 weilun@ssc-hn.com
 * @LastEditTime: 2024-03-20
-->
<script lang="ts" setup>
  import { PlusOutlined } from '@ant-design/icons-vue'
  import type { SelectProps } from 'ant-design-vue'
  import { onMounted, reactive, ref } from 'vue'
  import { watch } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestCompanyList } from '/@/api/business/company/org'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  import Configuration from './components/Configuration.vue'
  const router = useRouter()

  const searchParam = reactive({
    companyName: '',
    companyLabel: null,
  })
  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<CompanyListTypes.IRequest, CompanyListTypes.IResponse[]>(searchParam, requestCompanyList)

  onMounted(() => {
    queryList()
  })
  watch(
    () => dataList.value,
    () => {
      dataList.value.forEach((item) => {
        item.companyLabelList = []
        if (!item.companyLabel) return
        if(item.companyLabel.indexOf(',') > -1){
        item.companyLabelList = item.companyLabel.split(',')
          return
        }
        item.companyLabelList.push(item.companyLabel)
      })
    },
  )
  const columns = [
    {
      title: '机构名称',
      dataIndex: 'companyName',
      key: 'companyName',
    },
    {
      title: '机构标识',
      key: 'companyLabel',
      dataIndex: 'companyLabel',
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      key: 'createTime',
      sorter: (a, b) => a.createTime - b.createTime,
    },
    {
      title: '操作',
      key: 'action',
    },
  ]
  const addOrg = () => {
    router.push({
      path: '/operation/org/add',
      query: { type: 0 },
    })
  }
  const edit = (item) => {
    router.push({
      path: '/operation/org/add',
      query: { type: 1, companyId: item.companyId },
    })
  }
  const check = (item) => {
    router.push({
      path: '/operation/org/details',
      query: { id: item.companyId },
    })
  }
  const modalConfiguration = reactive({
    visible: false,
    companyId: NaN,
    success: () => queryList(),
  })
  const dispose = (record) => {
    modalConfiguration.companyId = record.companyId
    modalConfiguration.visible = true
  }
  const options3 = ref<SelectProps['options']>([
    {
      value: 0,
      label: '身份发行',
    },
    {
      value: 1,
      label: '身份模板',
    },
    {
      value: 2,
      label: '业务应用',
    },
    {
      value: 3,
      label: '溯源码',
    },
  ])
  const reset = () => {
    searchParam.companyName = ''
    searchParam.companyLabel = null
    queryList({ current: 1 })
  }
  const companyLabel = {
    '0': '身份发行',
    '1': '身份模板',
    '2': '业务应用',
    '3': '溯源码',
  }
</script>

<template>
  <div class="org-list">
    <div class="fliter-wrap">
      <div>
        <div class="filter-item">
          <span class="filter-name">机构名称：</span>
          <a-input v-model:value="searchParam.companyName" allowClear style="width: 200px" placeholder="机构名称" @press-enter="queryList()" />
        </div>
        <div class="filter-item">
          <span class="filter-name">机构标识：</span>
          <a-select v-model:value="searchParam.companyLabel" allowClear :options="options3" style="width: 200px" placeholder="机构标识" />
        </div>
      </div>
      <div>
        <a-button class="filter-action" @click="reset">重置</a-button>
        <a-button class="filter-action" type="primary" @click="queryList({ current: 1 })">查询</a-button>
      </div>
    </div>
    <div class="org-list-content">
      <div class="content-name">
        机构管理
        <a-button type="primary" @click="addOrg"><plus-outlined :style="{ 'font-weight': 'bold' }" />新建</a-button>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'companyLabel'">
            <template v-if="record.companyLabelList.length">
              <a-tag color="success" v-for="(item, index) in record.companyLabelList" :key="index">{{ companyLabel[item] }}</a-tag>
            </template>
          </template>
          <template v-if="column.key === 'createTime'">
            {{ new Date(+record.createTime).toLocaleString() }}
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a @click="edit(record)">编辑</a>
              <a @click="check(record)"> 查看 </a>
              <a @click="dispose(record)"> 权限配置 </a>
            </span>
          </template>
        </template>
      </a-table>
    </div>

    <Configuration v-model:visible="modalConfiguration.visible" :company-id="modalConfiguration.companyId" @success="modalConfiguration.success" />
  </div>
</template>

<style lang="less" scoped>
  .org-list {
    .fliter-wrap {
      border-radius: 2px;
      background: #fff;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px;

      .filter-item {
        display: inline-block;

        &:not(:nth-last-of-type(1)) {
          margin-right: 44px;
        }

        .filter-name {
          color: #000;
        }
      }

      .filter-action {
        &:not(:nth-last-of-type(1)) {
          margin-right: 8px;
        }
      }
    }

    .org-list-content {
      border-radius: 2px;
      background: #fff;
      padding: 20px 24px;

      .content-name {
        font-size: 16px;
        font-weight: 500;
        color: #000;
        margin-bottom: 20px;
      }
    }

    .content-name {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
